<template>
	<view class="wrap">

		<!-- 搜索 -->
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"></u-search>
		</view>

		<!-- 滚动组件(消息过多可以向下滑查看更多) -->
		<scroll-view class="scroll-list" scroll-y="true">
			<!-- 消息列表 -->
			<view class="uni-list">
				<!-- 遍历每一条消息 -->
				<Msg v-for="msgProp in msgProps" :msgProp="msgProp" :key="msgProp.id" />
			</view>
		</scroll-view>

	</view>
</template>
<script>
	/**
	 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
	 */
	export default {
		data() {
			return {
				keywords: '',
				msgProps: [{
						url: "/pages/sys/msg/list-item",
						iconColor: "icon-color03",
						icon: "icon-gonggao",
						count: "1",
						title: "通知公告",
						description: "请所有养殖户2月15日之前来管理员处登记信息",
						time: "12:35",
						id: "1"
					},
					{
						url: "/pages/sys/msg/list-item",
						iconColor: "icon-color04",
						icon: "icon-xinwen",
						count: "1",
						title: "新闻动态",
						description: "敏盖养殖户羊只达到100只以上奖励50000元",
						time: "09:07",
						id: "2"
					},
					{
						url: "/pages/sys/msg/examine-item",
						iconColor: "icon-color06",
						icon: "icon-bangong",
						count: "3",
						title: "日常办公",
						description: "王二狗提交的“申请”待你审批",
						time: "11月07日",
						id: "3"
					},
					{
						url: "/pages/sys/msg/list-item",
						iconColor: "icon-color12",
						icon: "icon-baoxiao",
						count: "1",
						title: "网上报销",
						description: "马志强提交的“差旅费报销”待你审批",
						time: "12:35",
						id: "4"
					},
					{
						url: "/pages/sys/msg/list-item",
						iconColor: "icon-color04",
						icon: "icon-youjian",
						count: "1",
						title: "我的邮件",
						description: "邮件提醒：邮件提醒：15封新邮件未读",
						time: "11月06日",
						id: "5"
					},
				]
			};
		},
		onLoad() {
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			search(value) {
				this.$u.toast('搜索内容为：' + value)
			}

		}
	};
</script>
<style lang="scss">
	@import '@/common/uni.css';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.uni-title {
		font-size: 30rpx;
		color: #333333;
		padding: 10px;
		background: #fff;
		border-top: 1px solid #ededed;
		margin-top: 20rpx;
	}

	.uni-media-list {
		padding: 15px 15px;

	}

	.uni-media-list-body {
		height: 42px;
		padding-left: 20rpx;
	}

	.uni-media-list-text-top {
		height: 40rpx;
		overflow: hidden;
		width: 100%;
		line-height: 40rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.uni-media-list-text-bottom {
		width: 100%;
		line-height: 24rpx;
		font-size: 26rpx;
		color: #666666;

		span {
			margin-right: 10rpx;
		}
	}
</style>
